import React, { useRef, RefObject } from 'react';
import './index.css';

function App() {
  const videoRefs: RefObject<HTMLVideoElement>[] = Array(9).fill(0).map(() => useRef<HTMLVideoElement>(null));
  const buttonNames: string[] = ['Home', 'About', 'Contact', 'Help'];

  return (
    <div>
      <div className="grid">
        {videoRefs.map((videoRef, index) => (
          <video key={index} ref={videoRef} controls></video>
        ))}
      </div>
      <div className="button-bar">
        {buttonNames.map((name, index) => (
          <button key={index} className="button">{name}</button>
        ))}
      </div>
    </div>
  );
}

export default App;